<template>
  <div class="homePage">
    <!-- 头部导航 我觉得叫头部标题比较合适 -->
    <!-- <navbar /> -->
    <!-- /头部导航 我觉得叫头部标题比较合适 -->
    <!-- banner -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
      <!--/ banner -->
    </div>
    <!-- 方块导航圆形导航 -->
    <div class="nav">
      <Nav />
    </div>
    <!-- /方块导航圆形导航 -->
    <!-- 公司推荐 -->
    <div class="recommend">
      <recommend />
    </div>
    <!-- /公司推荐 -->
    <!-- 家服人员推荐 -->
    <div class="recom-server">
      <recom-server />
    </div>
    <!-- /家服人员推荐 -->
    <!-- 底部导航 -->
    <!-- <tabbar /> -->
    <!-- /底部导航 -->
  </div>
</template>

<script>
// import navbar from '@/components/navbar'
import Nav from './component/nav.vue'
// import tabbar from '@/components/tabbar'
import recommend from '@/components/recommend'
import recomServer from '@/components/recom-server'
export default {
  components: {
    // navbar,
    Nav,
    // tabbar,
    recommend,
    recomServer
  },
  data () {
    return {

    }
  },
  created () {

  },
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
// body {
//   background-color:gray;
// }
.homePage {
  position: relative;
  background-color:#F9F5F5;
  // padding-top: 104px;
  // padding-bottom: 134px;
  .nav {
    background-color: #fff;
    padding: 0 32px;
  }
  .recommend,
  .recom-server {
    margin-top: 20px;
    background-color: #fff;
  }
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    // line-height: 150px;
    line-height: 282px;
    text-align: center;
    background-color: #ccc;
  }
/deep/.banner {
  // margin-top: 26px;
  height: 300px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 40px;
  background-color:#3f51b5;
  .van-grid-item__content {
    height: 100px;
  }
}
// .van-hairline--bottom::after {
//     border-bottom-width: 0;
//   }

// .van-tabbar--fixed {
//     position: fixed;
//     bottom: -2px;
//     left: 0;
// }

</style>
